<template> <!-- 其他页面 -->
  <div class="block-all flex-col">
    <div class="model-block-top">
      <!--<div contenteditable="true">-->
        <!--<p>这是可编辑的</p>-->
        <!--<p contenteditable="false">这是不可编辑的</p>-->
      <!--</div>-->
      <span class="titleface">按钮区</span>

      <div class="btn-block-style">

        <el-button @click="execCommand('bold')">加粗</el-button>
        <el-button @click="execCommand('insertUnorderedList')">无序列表</el-button>
        <el-button @click="execCommand('insertHorizontalRule')">水平线</el-button>
        <el-button @click="execCommand('undo')">后退</el-button>
        <el-button @click="execCommand('redo')">前进</el-button>
        <el-button @click="execCommand('formatBlock', '<p>')">段落</el-button>

        <el-button @click="execCommand('formatBlock', '<h1>')">h1</el-button>
        <el-button @click="execCommand('formatBlock', '<h2>')">h2</el-button>
        <el-button @click="execCommand('formatBlock', '<h3>')">h3</el-button>
        <el-button @click="execCommand('formatBlock', '<h4>')">h4</el-button>
        <el-button @click="execCommand('formatBlock', '<h5>')">h5</el-button>
        <el-button @click="execCommand('formatBlock', '<h6>')">h6</el-button>


        <el-button @click="createLink">链接</el-button>

        <button class="nav__img">插入图片
          <!--这个 input 是隐藏的-->
          <input type="file" accept="image/gif, image/jpeg, image/png" @change="insertImg">
        </button>

      </div>

    </div>
    <div class="model-block-bottom">
      <span class="titleface">文本区</span>

      <div class="text-block-style">
        <div class="editor" contenteditable="true" @input="print"></div>

        <div class="content">{{ theHtml }}</div>
      </div>


    </div>

  </div>
</template>

<style lang="scss" scoped>

  .model-block-top{
    height:50px;
    display: flex;
    flex-direction: column;
  }

  .btn-block-style{
    flex:1;
    display: flex;
    flex-direction: row;
  }



  .model-block-bottom{
    flex:1;
    display: flex;
    flex-direction: column;
    margin-top:10px;

  }

  .text-block-style{
    flex:1;
    display: flex;
    flex-direction: row;
    overflow-y: hidden;
  }


  .editor {
    flex: 1;
    /*position: relative;*/
    /*margin-right: 20px;*/
    padding: 20px;
    /*outline: none;*/
    border: 1px solid #EBEBEB;
    border-radius:10px;
    overflow-y: auto;
    img {
      max-width: 300px;
      max-height: 300px;
      vertical-align: middle;
    }
  }

  .content {
    flex: 1;
    border: 1px solid #EBEBEB;
    padding: 20px;
    margin-left:20px;
    border-radius:10px;
    word-break: break-all;
    word-wrap: break-word;
    overflow: scroll;
  }



</style>


<script>
import { mapGetters } from 'vuex'
import { mapActions } from 'vuex'
import {
  queryTagTree
} from '../../api/labelManagement'



export default {
  name: '',
  data(){
    return{


      theHtml:'',



    }
  },
  created(){


  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  components:{
  },
  methods: {
    ...mapActions({}),

    handleClick(tab, event) {
      // console.log(tab, event);
    },


    //操作
    execCommand(name, args = null){
      document.execCommand(name, false, args);
    },


    //左侧文本区输入
    print() {
      this.theHtml = document.querySelector('.editor').innerHTML;
    },


    //创建链接
    createLinkOo() {
      let url = window.prompt('请输入链接地址');
      if (url) this.execCommand('createLink', url);
    },
    createLink() {
      this.$prompt('请输入链接地址', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        this.execCommand('createLink', value);
      }).catch(() => {
      });

    },

    insertImg(e) {
      let reader = new FileReader();
      let file = e.target.files[0];
      reader.onload = () => {
        let base64Img = reader.result;
        this.execCommand('insertImage', base64Img);
        document.querySelector('.nav__img input').value = ''; // 解决同一张图片上传无效的问题
      };
      reader.readAsDataURL(file);
    }


  },
}
</script>
